<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="js/vue.js"></script>
  <script src="js/element-ui/lib/index.js"></script>
  <script src="js/axios-0.18.0.js"></script>
  <link rel="stylesheet" href="js/element-ui/lib/theme-chalk/index.css">
  <style>
    .el-table .warning-row {
      background: oldlace;
    }
    .el-table .success-row {
      background: #f0f9eb;
    }
  </style>
</head>
<body>
<div id="app">
  <!--表单-->
  <el-form :inline="true" :model="brand1" class="demo-form-inline">
  <!--<el-form ref="form" :model="form" label-width="80px">-->
    <el-form-item label="当前状态">
      <el-select v-model="brand1.status" placeholder="请选择当前状态">
        <el-option label="启用" value="1"></el-option>
        <el-option label="禁用" value="0"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="企业名称">
      <el-input v-model="brand1.companyName" placeholder="企业名称"></el-input>
    </el-form-item>
    <el-form-item label="品牌名称">
      <el-input v-model="brand1.brandName" placeholder="品牌名称"></el-input>
    </el-form-item>
    <el-button type="primary" @click="onSubmit">查询</el-button>
  </el-form>
  <!--按钮-->
  <el-row>
    <el-button type="danger" @click="deleteByIds">批量删除</el-button>
    <el-button type="primary"  @click="dialogVisible = true">新增</el-button>
    <el-button type="primary" round @click="selectAll">查询所有</el-button>
    <el-button type="primary" round @click="selectByPage">分页查询所有</el-button>
  </el-row>
  <!--对话框-->
   <el-dialog
          title="添加品牌"
          :visible.sync="dialogFormVisible"
          width="30%"
          :before-close="handleClose">
    <span>
    <el-form ref="form" :model="brand" label-width="80px">
  <el-form-item label="品牌名称">
    <el-input v-model="brand.brandName"></el-input>
  </el-form-item>
      <el-form-item label="企业名称">
    <el-input v-model="brand.companyName"></el-input>
  </el-form-item>
      <el-form-item label="排序">
    <el-input v-model="brand.ordered"></el-input>
         </el-form-item>
  <el-form-item label="状态">
    <el-switch v-model="brand.status" active-value="1" inactive-value="0"></el-switch>
  </el-form-item>
<el-form-item label="备注">
        <el-input type="textarea" v-model="brand.description"></el-input>
      </el-form-item>
      <el-form-item>
    <el-button type="primary" @click="addBrand">提交</el-button>
    <el-button @click="dialogFormVisible=false">取消</el-button>
  </el-form-item>
</el-form>
    </span>
  </el-dialog>
  <!--表格-->
  <template>
    <el-table

            :data="tableData"
            style="width: 100%"
            :row-class-name="tableRowClassName"
            @selection-change="handleSelectionChange">
      <el-table-column
              type="selection"
              width="55">
      </el-table-column>
      <el-table-column
              type="index"
              width="50">
      </el-table-column>
      <el-table-column
              prop="brandName"
              label="品牌名称"
              align="center"
             >
      </el-table-column>
      <el-table-column
              prop="companyName"
              label="企业名称"
              align="center"
             >
      </el-table-column>
      <el-table-column
              prop="ordered"
              align="center"
              label="排序">
      </el-table-column>
      <el-table-column
              prop="description"
              align="center"
              label="企业描述">
      </el-table-column>
      <el-table-column
              prop="status"
              align="center"
              label="当前状态">
      </el-table-column>
      <el-table-column
              prop="operate"
              align="center"
              label="操作">
          <template slot-scope="scope">
            <el-button type="primary" @click="open(scope.$index, scope.row)">修改</el-button>
            <el-button  type="danger" @click="deleteById(scope.$index, scope.row)">删除</el-button>
          </template>
      </el-table-column>
    </el-table>
  </template>
   <el-dialog
          title="修改品牌"
          :visible.sync="dialogVisible"
          width="30%"
          :before-close="handleClose">
    <span>
    <el-form ref="form" :model="brand" label-width="80px">
  <el-form-item label="品牌名称">
    <el-input v-model="brand.brandName"></el-input>
  </el-form-item>
      <el-form-item label="企业名称">
    <el-input v-model="brand.companyName"></el-input>
  </el-form-item>
      <el-form-item label="排序">
    <el-input v-model="brand.ordered" ></el-input>
         </el-form-item>
  <el-form-item label="状态" >
    <el-switch v-model="brand.status" active-value="1" inactive-value="0" >
    </el-switch>
  </el-form-item>
<el-form-item label="备注">
        <el-input type="textarea" v-model="brand.description"></el-input>
      </el-form-item>
      <el-form-item>
    <el-button type="primary" @click="upData">提交</el-button>
    <el-button @click="dialogVisible=false">取消</el-button>
  </el-form-item>
</el-form>
    </span>
  </el-dialog>
  <!--分页-->
  <div class="block">
  <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="5"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalCount">
  </el-pagination>
  </div>
</div>
<script>
  var flag=true;
  new Vue({
    el:"#app",
    mounted(){
     this.selectByPage()
    },
    methods: {
         oppen(idx, row) {
         var _this=this;
        _this.dialogVisible = true;
        if (row) {
            _this.title = '修改窗体';
            _this.brand.id = row.id;
            _this.brand.brandName = row.brandName;
            _this.brand.ordered = row.ordered;
            _this.brand.companyName = row.companyName;
            _this.brand.description = row.description;
            _this.brand.status = row.status;
        }
      },
        upData(){
         var _this=this;
         axios({
             method:"post",
             url:"http://localhost:8080/webProject/com/upData",
             data:_this.brand
         }).then(function (value) {
                 if (value.data==="success") {
                     _this.dialogVisible = false;
                     _this.selectByPage();
                     _this.$message({
                         message:"恭喜你修改成功",
                         type: 'success'
                     });
                     _this.clear();
                     _this.query({});
                 } else {
                     _this.$message({
                         message: "很抱歉修改失败",
                         type: 'error'
                     });
                 }
             }).catch(err => {
             })
        },
      deleteById($index,row){
        var _this=this;
       // console.log(this.brand);
        //将获取multipleSelection中所有的id值存入到一个int数组
        //边遍历
        // selectIds
        this.$confirm('您确定删除id为' + row.id + '的企业信息吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          _this.Ids[0]= row.id;
          axios({
            method:"post",
            url:"http://localhost:8080/webProject/com/deleteByIds",
            data:_this.Ids
          }).then(function (value) {
            if(value.data==="success"){
              _this.selectByPage();
              _this.$message({
                message: '恭喜你，删除成功~!',
                type: 'success'
              });
            }
            else {
              this.$message({
                message: "很抱歉删除失败",
                type: 'error'
              })
            }
          })
          }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      //批量删除
      deleteByIds(){
        var _this=this;
        console.log(this.multipleSelection);
        //将获取multipleSelection中所有的id值存入到一个int数组
        //边遍历
       // selectIds
        for (let i = 0; i < _this.multipleSelection.length ; i++) {
          let multipleSelectionElement = _this.multipleSelection[i];
         _this.Ids[i]= multipleSelectionElement.id;
        }
        axios({
          method:"post",
          url:"http://localhost:8080/webProject/com/deleteByIds",
          data:_this.Ids
        }).then(function (value) {
          if(value.data==="success"){
            _this.selectByPage();
            _this.$message({
              message: '恭喜你，删除成功~!',
              type: 'success'
            });
          }else {
            _this.$message.error('很抱歉，删除失败~!');
          }
        })
      },
      selectByPage(){
        var _this=this;
        flag=true;
        axios({
          method:"get",
          url:"http://localhost:8080/webProject/com/selectByPage?page="+_this.page+"&size="+_this.size
        }).then(function (value) {
          _this.tableData=value.data.rows;
          _this.totalCount=value.data.totalCount;
        })
      },
       selectAll(){
        var _this=this;
        axios({
          method:"get",
          url:"http://localhost:8080/webProject/com/selectAll"
        }).then(function (value) {
          //设置表格的数据 value.data{rows:[],totalCount:100}
          _this.tableData=value.data;
          _this.page=1;
          //总条数
         // _this.totalCount=value.data.totalCount;
        });
      },
      handleSizeChange(val) {
        //console.log(`每页 ${val} 条`);
        this.size=val;
        if(flag) {
          this.selectByPage();
        }else {
          this.onSubmit();
        }
      },
      handleCurrentChange(val) {
       // console.log(`当前页: ${val}`);
        this.page=val;
        if(flag) {
          this.selectByPage();
        }else {
          this.onSubmit();
        }
      },
      addBrand(){
        //console.log(this.brand);
        var _this=this;
        axios({
          method: "post",
          url:"http://localhost:8080/webProject/com/insert",
          data:_this.brand
        }).then(function (value) {
          if(value.data==="success"){
           _this.dialogFormVisible=false;
           _this.selectByPage();
            _this.$message({
              message: '恭喜你，添加成功~!',
              type: 'success'
            });
           //成功的提示框
            //location.href="brand.html";
          }else {
            _this.$message.error('很抱歉，添加失败~!');
            _this.selectByPage();
          }
        })
      },
      tableRowClassName({row, rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      },
      handleSelectionChange(val){
        this.multipleSelection = val;
        if (window.console) {
         console.log(this.multipleSelection);
        }
      },
      onSubmit() {
        flag=false;
       //console.log(this.brand1);
        var _this=this;
        axios({
          method:"post",
          url:"http://localhost:8080/webProject/com/selectByPageCondition?page="+_this.page+"&size="+_this.size,
          data:_this.brand1
        }).then(function (value) {
          if(value.data!=="失败"){
            _this.tableData=value.data.rows;
            _this.totalCount=value.data.totalCount;
            //总条数
           //_this.page=1;
          }else {
            _this.$message.error('很抱歉查不到~!');
          }
        });
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
                .then(_ => {
                  done();
                })
                .catch(_ => {});
      }
    },

    data() {
      return {
        //当前页数
        page:1,
        //总条数
        totalCount:20,
        //每页条数
        size:5,
        currentPage1: 5,
        currentPage2: 5,
        currentPage3: 5,
        currentPage4: 4,
        dialogVisible: false,
        dialogFormVisible:false,
       brand:{
         status:'',
         brandName:'',
         companyName:'',
         ordered:'',
         id:'',
         description:''
       },
        brand1:{
          status:'',
          brandName:'',
          companyName:'',
        },
        tableData: [{
          id:6,
          brandName: '华为',
          companyName: '华为科技有限公司',
          ordered: 66,
          status:"启用"
        }, {
          id:6,
          brandName: '华为',
          companyName: '华为科技有限公司',
          ordered: 66,
          status:"启用"
        }, {
          id:6,
          brandName: '华为',
          companyName: '华为科技有限公司',
          ordered: 66,
          status:"启用"
        }, {
          id:6,
          brandName: '华为',
          companyName: '华为科技有限公司',
          ordered: 66,
          status:"启用"
        }],
        //存放要删除的id数组
        Ids:[],
        multipleSelection: []
      }
    }
  })
</script>
</body>
</html>